<template>
    <div class="question_container">
        <span class="title">{{ questionData.no }}.{{ questionData.title }}</span>
        <ul class="options_container">
            <li v-for="option, index in questionData.options" :key="index">
                <label>
                    <input type="radio" 
                        :name="questionData.no" 
                        @click="onClick(questionData.no, index)"
                        :checked="index === questionData.selectIndex"/>
                    {{ option }}
                </label>
            </li>
        </ul>    
    </div>

</template>

<script setup>
    defineProps(["questionData"])
    const emit = defineEmits(["select"])
    function onClick(questionNo, index) {
        emit("select", questionNo, index)
    }

</script>

<style scoped>
    .question_container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 18px;
    }
    .title {
        font-weight: bold;
        font-size: 20px;
    }
    .options_container {
        display: flex;
        flex-direction: row;
    }
    .options_container li {
        margin-left: 6px;
        list-style: none;
    }

</style>